<template>
	<view id="app">
		<view class="container">
			<view class="f1 df br30 bgw bd1s brccd ">
				<view class="df aic w130 pr10 pl20 mtb10 br1s brc9" @click="handle('location')">
					<view class="f1 f28 c000">{{location.text}}</view>
					<view class="w30">
						<uv-icon name="arrow-down" size="24rpx"></uv-icon>
					</view>
				</view>
				<view class="f1 df" @click="handle('search')">
					<view class="f1 df pl15">
						<uv-icon name="search" size="40rpx"></uv-icon>
						<view class="f28 c999 mtb10">装铺师傅</view>
					</view>
					<view class="w120 bgwaring cw br30 plr20 ptb10 df aic jcc">搜索</view>
				</view>
			</view>
			<view class="df aic w60 pl20 jcc" @click="handle('msg')">
				<uv-icon name="chat" size="56rpx"></uv-icon>
			</view>
		</view>
		<view class="container">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="1500" indicator-active-color="#FFAC3E" indicator-color="#aaa"
							duration="500">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="swiper-item">
						<image :src="item.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="container">
			<uv-row>
				<uv-col span="3" v-for="(item,index) in navItem" :key="index">
					<view class="ver jcc w180">
						<view class="wh80">
							<image :src="item.url"></image>
						</view>
						<view class="f32 fw4 h50">{{item.title}}</view>
					</view>
				</uv-col>
			</uv-row>
		</view>
		<view class="container">
			<view class="adv-con">
				<view class="adv-left">
					<image :src="adv2.sc"></image>
				</view>
				<view class="adv-right">
					<view class="adv-top">
						<image :src="adv2.join"></image>
					</view>
					<view class="adv-bottom">
						<image :src="adv2.bz"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="df aic jcsb w100p">
				<view class="f36 fw5 tac pr">
					<view class="uborder"></view>
					<view class="txt">资深工匠推荐</view>
				</view>
				<view class="df w110 bd1s brc9 c666 br30  aic jcc f26" click="handletrain">更多</view>
			</view>
		</view>
		<view class="container">
			<swiper class="index-swiper" circular :indicator-dots="true" :autoplay="true" interval="12000" indicator-active-color="#FFAC3E" indicator-color="#aaa"
							duration="500">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="swiper-items rows">
						<view class="plr10 w240">
							<view class="w220 h340 mb20">
								<image :src="adv2.sc" class="w220 h340" mode="aspectFill"></image>
							</view>
							<view class="df fdc w220 oh">
								<view class="f28 c000 tac mb10">马师傅</view>
								<view class="f24 c999 thd">10年铺装经验.擅长岩板安装</view>
							</view>
						</view>
						<view class="plr10 w240">
							<view class="w220 h340 mb20">
								<image :src="adv2.sc" class="w220 h340" mode="aspectFill"></image>
							</view>
							<view class="df fdc w220 oh">
								<view class="f28 c000 tac mb10">马师傅</view>
								<view class="f24 c999 thd">10年铺装经验.擅长岩板安装</view>
							</view>
						</view>
						<view class="plr10 w240">
							<view class="w220 h340 mb20">
								<image :src="adv2.sc" class="w220 h340" mode="aspectFill"></image>
							</view>
							<view class="df fdc w220 oh">
								<view class="f28 c000 tac mb10 ">马师傅</view>
								<view class="f24 c999 thd oh w100p">10年铺装经验.擅长岩板安装</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="container adv">
			<image :src="list[0].url"></image>
		</view>
		<view class="container">
			<view class="df aic jcsb w100p">
				<view class="f36 fw5 tac pr">
					<view class="uborder"></view>
					<view class="txt">排行榜</view>
				</view>
				<view class="f1 df  c99 f30 pr15 jcr aie c666"><view></view></view>
				<view class="df w110 bd1s brc9 c666 br30  aic jcc f26" click="handlecourse">更多</view>
			</view>
		</view>
		<view class="container fdc">
			<view  class="df fdc bgw mb20  ptb15">
				<view class="df w100p aic plr15 bdb1s brcce pb20">
					<view class="wh140 mr20">
						<uv-avatar :src="avatar" size="140rpx"></uv-avatar>
					</view>
					<view class="f1 df fdc mb20">
						<view class="c000 f30 fw8 ptb20">马师傅</view>
						<view class="df jcl thd">
							<view class="bgwaring ptb10 f22 cw plr15 br15 mr15">专业岩板</view>
							<view class="bgwaring ptb10 f22 cw plr15 br15 mr15">专业技能证书</view>
							<view class="bgwaring ptb10 f22 cw plr15 br15 mr15 ">10年经验</view>
						</view>
					</view>
				</view>
				<view class="mt20 df fdc">
					<view class="plr15 f28 c666">施工案例</view>
					<view class="mt20 w100p pl10">
						<uv-album :urls="list" keyName="url" singleSize="690rpx" multipleSize="230rpx"  space="10rpx" :showMore="false"></uv-album>
					</view>
				</view>
			</view>
		</view>
		<view class="ver c999 mt10 mb30">
			<view class="w200 h40">
				<image src=""></image>
			</view>
			<view class="f24">
				版权所有(©)匠徕徕
			</view>
		</view>
		<q-previewImage ref="previewImage" :urls="previewImages" @open="open" @close="close"></q-previewImage>
		<uv-tabbar :value="0" :fixed="true" iconSize="50rpx" activeColor="#FFAC3E" inactiveColor="#9ea09f" zIndex="1000">
			<uv-tabbar-item text="首页">
				<template v-slot:active-icon>
					<image class="wh50" :src="selected"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="wh50" :src="selecte"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="找工匠">
				<template v-slot:active-icon>
					<image class="wh50" :src="ugjd"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="wh50" :src="ugj"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="消息" icon="chat"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uselected:this.util.config.host+'/static/images/uhomed.png',
				selecte:this.util.config.host+'/static/images/home.png',
				ugjd:this.util.config.host+'/static/images/gjd.png',
				ugj:this.util.config.host+'/static/images/gj.png',
				courseimg:this.util.config.host+"/static/images/1.jpg",
				avatar: this.util.config.host + '/static/images/logo.jpg',
				previewImages:[],
				location:{
					text:'需定位',
					lng:'',
					lat:'',
				},
				hasType:{}, 
				list: [{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					}, {
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					}, {
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				navItem:[
					{
						url:this.util.config.host+"/static/images/uitem1.png",
						title:"找工匠",
					},{
						url:this.util.config.host+"/static/images/uitem2.png",
						title:"排行榜",
					},{
						url:this.util.config.host+"/static/images/uitem3.png",
						title:"预约流程",
					},
					{url:this.util.config.host+"/static/images/uitem4.png",title:"我的预约"}
				],
				adv2:{
					sc:this.util.config.host+"/static/images/sc1.png",
					join:this.util.config.host+"/static/images/join1.png",
					bz:this.util.config.host+"/static/images/bz1.png",
				}

			}
		},
		onLoad() {
		},
		onShow(){
			console.log('page Show')
		},
		methods: {
			chooseType:function(){
				if(this.hasType.member){
					uni.navigateTo({
						url:'/pages/member/index/index'
					})
				}
				if(this.hasType.choose){
					uni.navigateTo({
						url:'/pages/user/index/index'
					})
				}
				if(this.hasType.status){
					this.choose = true;
				}else{
					this.errorTxt = '';
				}
			},
			handle(e){
				if(e == 'search'){
					uni.navigateTo({
						url:'/pages/user/cate/cate'
					})
				}
				if(e == 'location'){
					uni.navigateTo({
						url:'/pages/user/index/location'
					})
				}
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.swiper {
			height: 360rpx; width: 720rpx; background-color:  #fff;
		}
	.swiper-item {
		display: block;border-radius: 15rpx;overflow: hidden;
		height: 300rpx;
		margin-bottom: 50rpx;
		image{border-radius: 15rpx;}
	}
	.adv-con{
		display: flex; flex-direction: row;align-items: center;
		.adv-left{width:315rpx; height:365rpx;display: flex; align-items: end; margin-right: 10rpx;}
		.adv-right{width:395rpx;height: 371rpx; display: flex; flex-direction: column;
			.adv-top{height:192rpx;margin-bottom: 10rpx;width: 100%;}
			.adv-bottom{height:169rpx;width: 100%;}
		}
	}
	.adv{height:200rpx}
	.uborder{width:90%;height: 0;border-bottom: #FFAC3E 15rpx solid; border-radius: 0 0 15rpx 15rpx; position: absolute; bottom:0;left:5%;z-index: 1;}
	.txt{position: relative; z-index: 10;}
	.index-swiper {
		height: 490rpx;width: 720rpx;
		.swiper-items {
			width:720rpx;overflow: hidden;
			height: 432rpx;
		}
	}
</style>
